<template>
	<el-date-picker
		class="cl-date-picker"
		ref="date-picker"
		:value="value"
		v-bind="$attrs"
		v-on="$listeners"
		:type="type"
		:picker-options="pickerOptions"
	/>
</template>
<script>
	export default {
		name: "cl-date-picker",
		props: {
			value: {
				type: [Number, String, Array],
				default: ""
			},
			type: {
				type: String,
				default: "date"
			}
		},
		data() {
			return {
				visible: false,
				pickerOptions: {}
			};
		},
		watch: {
			type(val) {
				this.init()
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				if (this.type == "daterange") {
					this.pickerOptions = {
						...this.$attrs["picker-options"],
						shortcuts: [
							{
								text: "最近一周",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
									picker.$emit("pick", [start, end]);
								}
							},
							{
								text: "最近一个月",
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
									picker.$emit("pick", [start, end]);
								}
							}
							// {
							// 	text: "最近三个月",
							// 	onClick(picker) {
							// 		const end = new Date();
							// 		const start = new Date();
							// 		start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							// 		picker.$emit("pick", [start, end]);
							// 	}
							// }
						]
					};
				} else {
					this.pickerOptions = this.$attrs["picker-options"];
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
</style>
